<template>
<!--  主要内容-->
  <main
      style="display: block;position: relative;width: 100vw;height: 100%;z-index: 0;box-sizing: border-box;
          color: #34495e;font-family: Source Sans Pro,Helvetica Neue,Arial,sans-serif;font-size: 15px;
          letter-spacing: 0;margin: 0;overflow-x: hidden;">
<!--    右上角诈骗网站-->
    <a href="https://www.bilibili.com/video/BV1uT4y1P7CX/?spm_id_from=333.788.recommend_more_video.0"
       class="right_up_logo">
      <img alt="" src="../../public/Main/bilibili.png">
    </a>
<!--    侧边条-->
    <aside class="sidebar">
<!--      鼠标移动上去变手指，调用js函数-->
      <div @click="to_menu('/cover')" style="cursor: pointer">
        <img alt="" src="../../public/Main/programLogo.png" style="width: 250px">
      </div>
      <div class="sidebar-nav">
        <ul>
          <li class>
            <div @click="go('计算机基础')">
              <a title="计算机基础">
                <strong>计算机基础</strong>
              </a>
            </div>
          </li>
          <ul>
            <li>
              <a @click="go('编程语言')">
                编程语言
              </a>
            </li>
            <li>
              <a @click="go('数据结构与算法')">
                数据结构与算法
              </a>
            </li>
            <li>
              <a @click="go('计算机网络')">
                计算机网络
              </a>
            </li>
            <li>
              <a @click="go('操作系统')">
                操作系统
              </a>
            </li>
            <li>
              <a @click="go('数据库')">
                数据库
              </a>
            </li>
            <li>
              <a @click="go('小结')">
                小结
              </a>
            </li>
          </ul>
          <li class>
            <div @click="go('开发相关')">
              <a title="开发相关">
                <strong>开发相关</strong>
              </a>
            </div>
          </li>
          <li class>
            <a @click="go('人工智能/机器学习')" title="人工智能/机器学习">
              <strong>人工智能/机器学习</strong>
            </a>
          </li>
          <ul>
            <li>
              <a @click="go('学习路线')">
                学习路线
              </a>
            </li>
            <li>
              <a @click="go('框架推荐')">
                框架推荐
              </a>
            </li>
            <li>
              <a @click="go('资料推荐')">
                资料推荐
              </a>
            </li>
            <li>
              <a @click="go('常用模型')">
                常用模型
              </a>
            </li>
          </ul>
          <li class>
            <a @click="go('联系作者')" title="联系作者">
              <strong>联系作者</strong>
            </a>
          </li>
          <li class>
            <a>
              <strong>
                持续更新中...
              </strong>
            </a>
          </li>
        </ul>
      </div>
    </aside>
<!--    右侧-->
    <section class="content">
<!--      设置logo居中-->
      <div style="text-align: center">
        <img alt="" src="../../public/Main/Logo.png">
      </div>
      <article class="markdown-section" id="main">
        <hr>
        <h1 id="计算机基础">
          <a class="anchor">
            <p>
              <strong>
                计算机基础
              </strong>
            </p>
          </a>
        </h1>
        <hr>
        <blockquote id="编程语言">
          <p style="font-size: 20px">
            编程语言
          </p>
        </blockquote>
        <div class="alert flat tip">
          <span class="icon icon-tip"></span><a class="title">Tips</a>
          <ul>
            <li>
              起步：阅读相关资料，了解基本知识点，如变量类型、条件分支、循环体、函数、指针等。
              <ul>
                推荐资料：
                <li>
                  《C/C++ Primer Plus》
                </li>
                <li>
                  《C语言及其程序设计》
                </li>
                <li>
                  《Java实用教程》
                </li>
                <li>
                  《head first Java》
                </li>
                <li>
                  《Java编程思想》
                </li>
                <li>
                  《Java核心技术卷》
                </li>
                <li>
                  《python三剑客》（三本）
                </li>
                <li>
                  《流畅的python》
                </li>
              </ul>
            </li>
            <li>
              进阶：尝试开发属于自己的小游戏/小应用，推荐使用QT框架。如计算器、2048等。了解函数重载、多态，
              C++的stl，Java的设计模式、反射机制，Python的numpy、pandas等相关库的使用及底层原理等相关知识。
            </li>
            <li>
              结丹：C/C++尝试写操作系统，Java查看底层源码及各种机制，Python熟练进行数据处理、可视化，并开始入门机器学习/深度学习:)
            </li>
          </ul>
        </div>
        <div class="alert flat attention">
          <span class="icon icon-attention"></span><a class="title">Attention</a>
          <ul>
            <li>
              C语言文件结尾是c，C++才是cpp!
            </li>
            <li>
              不要随便在C语言里写中文!
            </li>
            <li>
              Python很方便，但是慢的和牛一样!
            </li>
            <li>
              Java开发香的一批!
            </li>
            <li>
              没有前端知识点是因为开发者是菜鸡!
            </li>
            <li>
              PHP是最好的语言!
            </li>
          </ul>
        </div>
        <hr>
        <blockquote>
          <p style="font-size: 20px" id="数据结构与算法">
            数据结构与算法
          </p>
        </blockquote>
        <hr>
        <div class="alert flat note">
          <span class="icon icon-note"></span><a class="title">Note</a>
          <ul>
            详情链接：
            <li>
              <a href="https://blog.csdn.net/qq_27846147/article/details/115337775?spm=1001.2014.3001.5502">简单的学生管理系统（c语言线性表-顺序存储）</a>
            </li>
            <li>
              <a href="https://blog.csdn.net/qq_27846147/article/details/115681154?spm=1001.2014.3001.5502">初学单链表，分享两道作业题（C语言）</a>
            </li>
            <li>
              <a href="https://blog.csdn.net/qq_27846147/article/details/117407140?spm=1001.2014.3001.5502">二叉树进行多位数简单四则运算的方法</a>
            </li>
            <li>
              <a href="https://blog.csdn.net/qq_27846147/article/details/117463465?spm=1001.2014.3001.5502">数据结构——邻接矩阵法（C语言实现）</a>
            </li>
            <li>
              <a href="https://blog.csdn.net/qq_27846147/article/details/117664831?spm=1001.2014.3001.5502">数据结构——邻接表法（C语言实现）</a>
            </li>
            <li>
              <a href="https://blog.csdn.net/qq_27846147/article/details/118162541?spm=1001.2014.3001.5502">数据结构——折半查找（C语言实现）</a>
            </li>
            <li>
              <a href="https://blog.csdn.net/qq_27846147/article/details/118162606?spm=1001.2014.3001.5502">数据结构——分块查找（C语言实现）</a>
            </li>
            <li>
              <a href="https://blog.csdn.net/qq_27846147/article/details/118299881?spm=1001.2014.3001.5502">二叉搜索树（BST树）——C语言实现</a>
            </li>
            <li>
              <a href="https://blog.csdn.net/qq_27846147/article/details/118162628?spm=1001.2014.3001.5502">数据结构期末复习（第一章
                绪论）</a>
            </li>
            <li>
              <a href="https://blog.csdn.net/qq_27846147/article/details/118163470?spm=1001.2014.3001.5502">数据结构期末复习（第二章
                线性表）</a>
            </li>
            <li>
              <a href="https://blog.csdn.net/qq_27846147/article/details/118185224?spm=1001.2014.3001.5502">数据结构期末复习（第三章
                栈与队列）</a>
            </li>
            <li>
              <a href="https://blog.csdn.net/qq_27846147/article/details/118188176?spm=1001.2014.3001.5502">数据结构期末复习（第四章
                串）</a>
            </li>
            <li>
              <a href="https://blog.csdn.net/qq_27846147/article/details/118195928?spm=1001.2014.3001.5502">数据结构期末复习（第五章
                数组和广义表）</a>
            </li>
            <li>
              <a href="https://blog.csdn.net/qq_27846147/article/details/118384461?spm=1001.2014.3001.5502">数据结构期末复习（第六章
                树与二叉树）</a>
            </li>
            <li>
              <a href="https://blog.csdn.net/qq_27846147/article/details/118445050?spm=1001.2014.3001.5502">数据结构期末复习（第七章
                图）</a>
            </li>
            <li>
              <a href="https://blog.csdn.net/qq_27846147/article/details/118391881?spm=1001.2014.3001.5502">数据结构期末复习（第九章
                查找）</a>
            </li>
          </ul>
        </div>
        <div class="alert flat tip">
          <span class="icon icon-tip"></span><a class="title">Tips</a>
          <ul>
            <li>
              建议数据结构多做考研题。
            </li>
            <li>
              多写代码，最好用C语言写，因为能帮助你更加了解底层。
            </li>
            <li>
              有不会的一定尽量不要Copy，多自己想，自己想出来和copy出来是不一样的。
            </li>
          </ul>
        </div>
        <hr>
        <blockquote id="计算机网络">
          <p style="font-size: 20px">
            计算机网络
          </p>
        </blockquote>
        <hr>
        <div class="alert flat attention">
          <span class="icon icon-attention"></span><a class="title">Attention</a>
          <div style="text-indent: 30px">
            由于作者太菜，这边借用一下大佬的博客，有需要请点击链接→<a style="text-indent: 0"
              href="https://blog.csdn.net/qq_42468130/article/details/82760291?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522165122893716782425194579%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=165122893716782425194579&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~top_positive~default-1-82760291.142^v9^pc_search_result_control_group,157^v4^control&utm_term=%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%BD%91%E7%BB%9C&spm=1018.2226.3001.4187">计算机网络知识点汇总（谢希仁
            第七版）</a>
          </div>
        </div>
        <hr>
        <div style="display: block;">
          <img src="../../public/Main/webNet.jpg" style="width:100%;height:100%;">
          <p style="text-align: center">计网思维导图</p>
        </div>
        <hr>
        <blockquote id="操作系统">
          <p style="font-size: 20px">
            操作系统
          </p>
        </blockquote>
        <hr>
        <div class="alert flat note">
          <span class="icon icon-note"></span><a class="title">Note</a>
          <ul>
            <li>
              第 1 章 计算机系统概述
              <ul>
                <li>
                  1.1 操作系统的基本概念
                  <ul>
                    <li>
                      1.1.1 <a href="https://blog.csdn.net/weixin_43914604/article/details/104408571">操作系统的概念、功能和目标（系统资源的管理者、提供接口、作为扩充机器、虚拟机）</a>
                    </li>
                    <li>
                      1.1.2 <a href="https://blog.csdn.net/weixin_43914604/article/details/104416461">操作系统的特征（并发、共享、虚拟、异步）</a>
                    </li>
                  </ul>
                </li>
                <li>
                  1.2 操作系统的发展和分类
                  <ul>
                    <li>
                      1.2.1 <a href="https://blog.csdn.net/weixin_43914604/article/details/104445449">操作系统的发展和分类（手工、单道/多道批处理、分时、实时、网络、分布式、嵌入式、个人计算机）</a>
                    </li>
                  </ul>
                </li>
                <li>
                  1.3 操作系统的运行机制和体系结构
                  <ul>
                    <li>
                      1.3.1 <a
                        href="https://blog.csdn.net/weixin_43914604/article/details/104415990?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522165129827316781483781089%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=165129827316781483781089&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~top_positive~default-1-104415990.142^v9^pc_search_result_control_group,157^v4^control&utm_term=%E6%93%8D%E4%BD%9C%E7%B3%BB%E7%BB%9F&spm=1018.2226.3001.4187">操作系统的运行机制和体系结构（大内核、小内核）</a>
                    </li>
                    <li>
                      1.3.2 <a href="https://blog.csdn.net/weixin_43914604/article/details/104462974">中断和异常（内中断和外中断、中断处理过程）</a>
                    </li>
                    <li>
                      1.3.3 <a href="https://blog.csdn.net/weixin_43914604/article/details/104464558">
                      系统调用（执行过程、访管指令、库函数与系统调用）</a>
                    </li>
                  </ul>
                </li>
                <li>
                  <a href="https://blog.csdn.net/weixin_43914604/article/details/104480486">第一章操作系统概述错题整理</a>
                </li>
              </ul>
            </li>
            <li>
              第 2 章 进程管理
              <ul>
                <li>
                  2.1 进程与线程
                  <ul>
                    <li>
                      2.2.1<a href="https://blog.csdn.net/weixin_43914604/article/details/104758221">处理机调度的概念及层次</a>
                    </li>
                    <li>
                      2.2.2<a href="https://blog.csdn.net/weixin_43914604/article/details/104819326">进程的状态（运行、就绪、阻塞、创建、终止）及转换（就绪->运行、运行->就绪、运行->阻塞、阻塞->就绪）</a>
                    </li>
                    <li>
                      2.2.3<a href="https://blog.csdn.net/weixin_43914604/article/details/104880533">原语实现对进程的控制</a>
                    </li>
                    <li>
                      2.2.4<a href="https://blog.csdn.net/weixin_43914604/article/details/104882398">进程之间的通信（共享通信、消息传递、管道通信）</a>
                    </li>
                    <li>
                      2.2.5<a href="https://blog.csdn.net/weixin_43914604/article/details/104885645">线程概念与多线程模型</a>
                    </li>
                  </ul>
                </li>
                <li>
                  2.2 处理机的调度
                  <ul>
                    <li>
                      2.2.1 <a href="https://blog.csdn.net/weixin_43914604/article/details/105323244">处理机调度的概念及层次</a>
                    </li>
                    <li>
                      2.2.2 <a href="https://blog.csdn.net/weixin_43914604/article/details/105324472">进程调度的时机（主动放弃与被动放弃）、切换与过程（广义与狭义）、方式（非剥夺与剥夺）</a>
                    </li>
                    <li>
                      2.2.3 <a href="https://blog.csdn.net/weixin_43914604/article/details/105325136">度算法的评价指标（cpu利用率、系统吞吐量、周转时间、等待时间、响应时间）</a>
                    </li>
                    <li>
                      2.2.4 <a href="https://blog.csdn.net/weixin_43914604/article/details/105328521">作业/进程调度算法（FCFS先来先服务、SJF短作业优先、HRRN高响应比优先）</a>
                    </li>
                    <li>
                      2.2.5 <a href="https://blog.csdn.net/weixin_43914604/article/details/105333646">作业/进程调度算法（时间片轮转调度算法、优先级调度算法、多级反馈队列调度算法）</a>
                    </li>
                  </ul>
                </li>
                <li>
                  2.3 进程的同步与互斥
                  <ul>
                    <li>
                      2.3.1 <a href="https://blog.csdn.net/weixin_43914604/article/details/104942405">进程的同步与互斥</a>
                    </li>
                    <li>
                      2.3.2 <a
                        href="https://blog.csdn.net/weixin_43914604/article/details/104943004">实现临界区进程互斥的软件实现方法</a>
                    </li>
                    <li>
                      2.3.3 <a
                        href="https://blog.csdn.net/weixin_43914604/article/details/104944962">实现临界区进程互斥的硬件实现方法</a>
                    </li>
                    <li>
                      2.3.4 <a href="https://blog.csdn.net/weixin_43914604/article/details/104951182">信号量机制（整型信号量、记录型信号量P、V）</a>
                    </li>
                    <li>
                      2.3.5 <a href="https://blog.csdn.net/weixin_43914604/article/details/104954222">信号量机制实现进程的互斥、同步与前驱关系</a>
                    </li>
                    <li>
                      2.3.6 <a href="https://blog.csdn.net/weixin_43914604/article/details/105120888">进程同步与互斥经典问题（生产者-消费者问题、多生产者-多消费者问题、吸烟者问题、读者-写者问题、哲学家进餐问题）</a>
                    </li>
                    <li>
                      2.3.7 <a
                        href="https://blog.csdn.net/weixin_43914604/article/details/105420594">管程和java中实现管程的机制</a>
                    </li>
                  </ul>
                </li>
                <li>
                  2.4 死锁
                  <ul>
                    <li>
                      2.4.1 <a
                        href="https://blog.csdn.net/weixin_43914604/article/details/105437474">死锁详解(预防、避免、检测、解除)</a>
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
          </ul>
          <p><strong style="font-size: 20px">To Be Continue...</strong></p>
        </div>
        <hr>
        <div style="display: block;">
          <img alt="" src="../../public/Main/sys.png" style="width:100%;height:100%;">
          <p style="text-align: center">操作系统思维导图</p>
        </div>
        <hr>
        <blockquote id="数据库">
          <p style="font-size: 20px">
            数据库
          </p>
        </blockquote>
        <hr>
        <div class="alert flat note">
          <div>
            <span class="icon icon-note"></span><a class="title">Note</a>
            <div>
              <a style="text-indent: 30px">详情请戳链接→ </a><a  style="text-indent: 0"
                                                           href="https://blog.csdn.net/hebtu666/article/details/115613082?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522165129177916781683950357%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=165129177916781683950357&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~top_positive~default-1-115613082.142^v9^pc_search_result_control_group,157^v4^control&utm_term=%E6%95%B0%E6%8D%AE%E5%BA%93&spm=1018.2226.3001.4187">超硬核！数据库学霸笔记，考试/面试随便秒杀</a>
            </div>
          </div>
          </div>
        <hr>
        <blockquote id="小结">
          <p style="font-size: 20px">
            小结
          </p>
        </blockquote>
        <hr>
        <blockquote style="font-size: 20px">
          计算机基础是一个计算机学生起码应该掌握的东西，是做其它一切的基础。我们应该在了解这些的基础上延伸。另外，作如下补充：
          <ul>
            <li>
              408推荐资料：《王道考研》(4本，b站有网课)
            </li>
            <li>
              数据库推荐软件:sqlserver management stdio, DataGrip(sqlserver)
            </li>
            <li>
              专精一门语言之后，学习其它语言都不会太难。编程语言本身不是问题，重要的是自己对于深入学习的求知欲。
            </li>
            <li>
              编程基础+数据结构深入方法：刷题，刷题，还是**的刷题。推荐以下几个网站：
              <ul>
                <li>
                  我最早的刷题网站 -> <a @click="to_menu('https://www.dotcpp.com/oj/problemset.html')" style="cursor: pointer">蓝桥杯</a>
                </li>
                <li>
                  我刷的最多的网站 -> <a @click="to_menu('https://pintia.cn/')" style="cursor: pointer">pta</a>
                </li>
                <li>
                  我开始不久并打算未来很长一段时间用的网站 -> <a @click="to_menu('https://leetcode-cn.com/problemset/all/')"
                                             style="cursor: pointer">LeetCode</a>
                </li>
                <li>
                  和力扣一样很实用的面试网站 -> <a @click="to_menu('https://www.nowcoder.com/')" style="cursor: pointer">牛客网</a>
                </li>
              </ul>
            </li>
            <li>
              推荐IDE：
              <ul>
                <li>
                  C/C++ : Clion
                </li>
                <li>
                  Java : Idea
                </li>
                <li>
                  Python : Pycharm
                </li>
                <li>
                  C# : Rider
                </li>
                <li>
                  Html/Css/Javascript : Webstorm
                </li>
                <li>
                  轻量级1 : vscode
                </li>
                <li>
                  轻量级2 : sublime
                </li>
              </ul>
            </li>
          </ul>
        </blockquote>
        <hr>
        <hr>
        <div id="开发相关">
          <h1>
            <a class="anchor">
              <p>
                <strong>
                  开发相关
                </strong>
              </p>
            </a>
          </h1>
        </div>
        <hr>
        <blockquote>
          <span class="icon icon-note"></span><a class="title">Note</a>
          <div style="font-size: 18px; font-family: '微软雅黑',serif; color: black;">
            Spring系列成熟框架：
            <ul>
              <li>
                Hibernate
              </li>
              <li>
                Struts2
              </li>
              <li>
                Struts(已淘汰)
              </li>
              <li>
                MyBatis
              </li>
              <li>
                Spring
              </li>
              <li>
                spring MVC
              </li>
            </ul>
            兴起框架：
            <ul>
              <li>
                jersey
              </li>
              <li>
                Springboot
              </li>
              <li>
                Play
              </li>
              <li>
                Vue.js
              </li>
              <li>
                Jfinal
              </li>
            </ul>
          </div>
        </blockquote>
        <div class="alert flat attention">
          <span class="icon icon-attention"></span><a class="title">Attention</a>
          <p style="text-indent: 30px">由于开发者水平有限与方向不同等问题，此块内容牵扯知识盲区，有需要请移步→<a href="https://blog.csdn.net/u013652550?type=blog" style="text-indent: 0">亮のBlog</a></p>
        </div>
        <hr>
        <div id="人工智能/机器学习">
          <h1>
            <a class="anchor">
              <p>
                <strong>
                  人工智能/机器学习
                </strong>
              </p>
            </a>
          </h1>
        </div>
        <hr>
        <blockquote id="学习路线">
          <p style="font-size: 20px">
            学习路线
          </p>
        </blockquote>
        <hr>
        <div class="alert flat note">
          <span class="icon icon-note"></span><a class="title">Note</a>
          <p style="text-indent: 30px">经过老师学长们为期一年(多一点)的<a style="text-decoration: line-through;text-indent: 0">调教</a>教导，<a style="text-decoration: line-through;text-indent: 0px">白嫖</a>
            总结了如下的学习路线，中间有一些自己看的/做的/用的资料或网站，供大家参考学习。新手入门，有错误请指正！</p>
          <p>
            <a style="text-indent: 30px">
              <strong style="font-size: 16px">路线(也是我自己的路线)：</strong>python基础 -> opencv -> 图像处理 -> 概率论 -> 线性代数 -> 统计学 ->
              机器学习 -> pytorch深度学习（李宏毅）
            </a>
          </p>
        </div>
        <div class="alert flat tip">
          <span class="icon icon-tip"></span><a class="title">Tips</a>
          <ul>
            <li>
              机器学习、深度学习上手难度会比做开发难很多，尤其是<strong style="font-size: 16px">数学</strong>还没有学完的时候！
              不要看别人学开发学前后端进度很快就浮躁，慢慢来，纠结方向反复横跳才是最耽误时间的。
            </li>
            <li>
              建议中间穿插学一下numpy、pandas等常用库，无论是读数据还是做一些简单的处理，这两个库都有比较方便的方法。
            </li>
            <li>
              切忌只学理论，经常跑一跑数据集、读一读论文，热一下手。论文永远不要去<strong style="font-size: 16px">中国知网</strong>找！（血的教训）
            </li>
          </ul>
        </div>
        <hr>
        <blockquote id="框架推荐">
          <p style="font-size: 20px">
            框架推荐
          </p>
        </blockquote>
        <hr>
        <div class="alert flat note">
          <span class="icon icon-note"></span><a class="title">Note</a>
          <ul>
            <li>
              用的最多的肯定还是和<strong style="font-size: 16px">Pytorch</strong>。
              但是很多企业的比赛会要求用他们自己的深度学习库，比如华为的<strong style="font-size: 16px">MindSpore</strong>
              和百度的<strong style="font-size: 16px">Paddlepaddle</strong>。但是实际上都大差不差，
              模型理解了之后用什么框架其实都差不多的。我这边入门的是Pytorch，官方文档在主页左上角《在线文档》部分下拉菜单中有附链接。
            </li>
            <li>
              另外，强烈建议也学习一下机器学习库，比如<strong style="font-size: 16px">sklearn</strong>， <strong style="font-size: 16px">Scipy</strong>这类。
            </li>
            <li>
              matplotlib也要熟练运用，作图不管是训练还是评估模型都是蛮重要的。
            </li>
          </ul>
        </div>
        <div class="alert flat attention">
          <span class="icon icon-attention"></span><a class="title">Attention</a>
          <p style="text-indent: 30px">matplotlib不是深度学习库@icy :P</p>
        </div>
        <blockquote id="资料推荐">
          <p style="font-size: 20px">
            资料推荐
          </p>
        </blockquote>
        <hr>
        <div class="alert flat note">
          <span class="icon icon-note"></span><a class="title">Note</a>
          <ul>
            <li>
              Python基础
              <ul>
                <li>
                  《Python编程快速上手》
                </li>
                <li>
                  《Python从入门到精通》
                </li>
                <li>
                  《Python极客项目编程》
                </li>
                <li>
                  《流畅的Python》
                </li>
                <li>
                  git开源项目——Python-100-Days
                </li>
                <li>
                  Bilibili大学推的短视频:)
                </li>
              </ul>
            </li>
            <li>
              opencv/图像处理
              <ul>
                <li>
                  多读C++源码
                </li>
                <li>
                  多做<strong style="font-size: 16px">数学建模</strong>
                </li>
                <li>
                  图像增强/二值化/滤波/各种算法....
                </li>
              </ul>
            </li>
            <li>
              概率论\线性代数\统计学
              <ul>
                <li>
                  教科书
                </li>
                <li>
                  <a href="https://space.bilibili.com/88461692?spm_id_from=333.337.0.0">万能的b站</a>
                </li>
                <li>
                  《统计学习方法》
                </li>
                <li>
                  To Be Continue...
                </li>
              </ul>
            </li>
            <li>
              机器学习/深度学习
              <ul>
                <li>
                  西瓜书/南瓜书
                </li>
                <li>
                  《神经网络与深度学习》
                </li>
                <li>
                  《人工智能导论》
                </li>
                <li>
                  《机器学习实战》
                </li>
                <li>
                  <a>Bilibili大学</a>
                  <a style="margin: 0 10px">-></a><a style="margin: 0 1px"
                                                     href="https://www.bilibili.com/video/BV1Y7411d7Ys?spm_id_from=333.1007.top_right_bar_window_custom_collection.content.click">传送门1
                </a>
                  <a style="margin: 0 10px"
                     href="https://www.bilibili.com/video/BV1Wv411h7kN?spm_id_from=333.337.search-card.all.click">
                    传送门2
                  </a>
                </li>
              </ul>
            </li>

          </ul>
        </div>
        <blockquote id="常用模型">
          <p style="font-size: 20px">
            常用模型
          </p>
        </blockquote>
        <div class="alert flat note">
          <span class="icon icon-note"></span><a class="title">Note</a>
          <ul>
            <li>
              常用模型
              <ul>
                <li>
                  LeNet
                </li>
                <li>
                  AlexNet
                </li>
                <li>
                  CaffeNet
                </li>
                <li>
                  GooleNet
                </li>
                <li>
                  VGGNet
                </li>
                <li>
                  ResNet
                </li>
                <li>
                  SENet
                </li>
              </ul>
            </li>
            <li>
              常用算法
              <ul>
                <li>
                  过采样
                </li>
                <li>
                  线性回归
                </li>
                <li>
                  逻辑分类
                </li>
                <li>
                  决策树
                </li>
                <li>
                  朴素贝叶斯
                </li>
                <li>
                  SVM
                </li>
                <li>
                  KNN
                </li>
                <li>
                  k-means
                </li>
                <li>
                  随机森林
                </li>
                <li>
                  降维
                </li>
                <li>
                  神经网络
                </li>
              </ul>
            </li>
          </ul>
        </div>
        <hr>
        <div id="联系作者">
          <h1>
            <a class="anchor">
              <p>
                <strong>
                  联系作者
                </strong>
              </p>
            </a>
          </h1>
        </div>
        <hr>
        <div class="alert flat attention">
          <span class="icon icon-attention"></span><a class="title">Attention</a>
          <p style="text-indent: 30px">三天肝完我自己都觉得不可思议....内容写的有点急，后面有时间会慢慢更新...</p>
          <p style="text-indent: 30px">水平有限，不过内容应该没有什么大问题.....吧。有问题的话就当看个乐子:D</p>
          <p style="text-indent: 30px">Enjoy~</p>
        </div>
      </article>
      <div class="foot-bot">
        <p style="text-align: center; font-size: 25px; font-family: 字魂110号-武林江湖体; color: black">
          <a>
            星光不负摸鱼人
          </a>
          <a style="margin: 0 50px">
            &copy;Made by cupkers 2022
          </a>
        </p>
        <div style="text-align: center;">
          <img alt="" src="../../public/Main/fish.png" style="max-width: 50px; margin: 0 50px">
          <img alt="" src="../../public/Main/fish.png" style="max-width: 50px; margin: 0 50px">
          <img alt="" src="../../public/Main/fish.png" style="max-width: 50px; margin: 0 50px">
          <img alt="" src="../../public/Main/fish.png" style="max-width: 50px; margin: 0 50px">
          <img alt="" src="../../public/Main/fish.png" style="max-width: 50px; margin: 0 50px">
          <img alt="" src="../../public/Main/fish.png" style="max-width: 50px; margin: 0 50px">
          <img alt="" src="../../public/Main/fish.png" style="max-width: 50px; margin: 0 50px">
          <img alt="" src="../../public/Main/fish.png" style="max-width: 50px; margin: 0 50px">
          <img alt="" src="../../public/Main/fish.png" style="max-width: 50px; margin: 0 50px">
          <img alt="" src="../../public/Main/fish.png" style="max-width: 50px; margin: 0 50px">
        </div>
      </div>
    </section>
    <div style="display: block; height: 100vh; ">
    </div>
  </main>
</template>

<script>
export default {
  name: 'Main',
  data() {
    return {
      activeIndex: '/MainPage'
    };
  },
  //js函数
  methods: {
    //滚动至指定位置，平滑滚动
    go(id) {
      document.getElementById(id).scrollIntoView({
        behavior: 'smooth'
      });
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    //跳转至某网页，非弹出
    to_menu(url) {
      window.open(url, '_self');
    }
  },
  created() {
  }
}
</script>
<style scoped>

/*标题*/
.title{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  font-size: 23px;
  font-weight: 600;
  margin: 0;
  color: black;
}

/*note图标*/
.alert.flat.note .icon-note {
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='1em' height='1em' viewBox='0 0 16 16' fill='%2301354d' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' d='M8 16A8 8 0 108 0a8 8 0 000 16zm.93-9.412l-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM8 5.5a1 1 0 100-2 1 1 0 000 2z'/%3E%3C/svg%3E")
  }

/*attention图标*/
.alert.flat.attention .icon-attention {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='1em' height='1em' viewBox='0 0 16 16' fill='%23551713' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' d='M8 15A7 7 0 108 1a7 7 0 000 14zm0 1A8 8 0 108 0a8 8 0 000 16z'/%3E%3Cpath fill-rule='evenodd' d='M11.354 4.646a.5.5 0 010 .708l-6 6a.5.5 0 01-.708-.708l6-6a.5.5 0 01.708 0z'/%3E%3C/svg%3E")
}

/*图标父类*/
.icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  background-repeat: no-repeat;
  margin-right: .5rem;
}

/*左侧小杠杠*/
.markdown-section blockquote {
  border-left: 4px solid #42b983;
  color: #858585;
  margin: 2em 0;
  padding-left: 20px;
}

/*blockquote样式*/
blockquote {
  display: block;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 40px;
  margin-inline-end: 40px;
}

/*设置alert顶层父类样式*/
.alert {
  display: block;
  position: relative;
  word-wrap: break-word;
  word-break: break-word;
  padding: .75rem 1.25rem !important;
  margin-bottom: 1rem !important;
}

/*markdown中的h1样式*/
.markdown-section h1 {
  font-size: 2rem;
  margin: 0 0 1rem;
}

.markdown-section h1, .markdown-section h2, .markdown-section h3, .markdown-section h4, .markdown-section strong {
  color: #2c3e50;
  font-weight: 600;
  font-size: 2rem;
}
/*markdown中的a样式*/
.markdown-section a {
  font-weight: 600;
  display: inline-block;
  text-decoration: none;
  transition: all .3s;
}

/*ul嵌套ul样式*/
ul ul {
  list-style-type: circle;
  margin-block-start: 0;
  margin-block-end: 0;
}

/*ul样式*/
ul {
  display: block;
  list-style-type: disc;
  margin-inline-start: 0;
  margin-inline-end: 0;
  padding-inline-start: 40px;
}

/*侧边样式，包含越界自动添加滚动条、字体信息、取消超链接下划线等*/
.sidebar ul li a {
  color: #505d6b;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 2em;
  font-family: Source Sans Pro, Helvetica Neue, Arial, sans-serif;
  border-bottom: none;
  display: block;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-text-size-adjust: none;
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
  text-decoration: none;
}

/*取消列表前面的·*/
.sidebar ul, .sidebar ul li {
  list-style: none;
}

/*li样式，有·*/
li {
  display: list-item;
  text-align: -webkit-match-parent;
}

/*侧边栏的li没.，并设置左侧间隔*/
.sidebar li {
  margin: 6px 0;
  list-style: none;
}

/*侧边栏中的ul样式*/
.sidebar ul {
  overflow-x: hidden;
  margin: 0 0 0 15px;
  padding: 0;
}

/*换行-》下划线*/
hr {
  display: block;
  unicode-bidi: isolate;
  margin-block-start: 0.5em;
  margin-block-end: 0.5em;
  margin-inline-start: auto;
  margin-inline-end: auto;
  overflow: hidden;
}

/*框框背景等信息*/
.alert.flat {
  border-radius: .125rem;
  color: #383d41;
  background-color: #e2e3e5;
  border: 1px solid #d6d8db;
}

.anchor {
  display: inline-block;
  text-decoration: none;
  transition: all .3s;
}

/*tip图标*/
.alert.flat.tip .icon-tip {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='1em' height='1em' viewBox='0 0 352 512' fill='%2318381a' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M96.06 454.35c.01 6.29 1.87 12.45 5.36 17.69l17.09 25.69a31.99 31.99 0 0026.64 14.28h61.71a31.99 31.99 0 0026.64-14.28l17.09-25.69a31.989 31.989 0 005.36-17.69l.04-38.35H96.01l.05 38.35zM0 176c0 44.37 16.45 84.85 43.56 115.78 16.52 18.85 42.36 58.23 52.21 91.45.04.26.07.52.11.78h160.24c.04-.26.07-.51.11-.78 9.85-33.22 35.69-72.6 52.21-91.45C335.55 260.85 352 220.37 352 176 352 78.61 272.91-.3 175.45 0 73.44.31 0 82.97 0 176zm176-80c-44.11 0-80 35.89-80 80 0 8.84-7.16 16-16 16s-16-7.16-16-16c0-61.76 50.24-112 112-112 8.84 0 16 7.16 16 16s-7.16 16-16 16z'/%3E%3C/svg%3E");
}

/*tip框框样式*/
.alert.flat.tip {
  color: #285b2a;
  background-color: #dbefdc;
  border-color: #c9e7cb;
  letter-spacing: 0;
  margin: 0;
  overflow-x: hidden;
}

/*attention框框样式*/
.alert.flat.attention {
  color: #285b2a;
  background-color: #f1acac;
  border-color: #c9e7cb;
  letter-spacing: 0;
  margin: 0;
  overflow-x: hidden;
}

/*note框框样式*/
.alert.flat.note {
  color: #285b2a;
  background-color: #7abdf1;
  border-color: #c9e7cb;
  letter-spacing: 0;
  margin: 0;
  overflow-x: hidden;
}

/*右侧整体样式*/
.content {
  display: block;
  color: #34495e;
  font-family: Source Sans Pro, Helvetica Neue, Arial, sans-serif;
  font-size: 15px;
  letter-spacing: 0;
  margin: 0;
  overflow-x: hidden;
  padding-top: 60px;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 300px;
  transition: left .25s ease;
}

/*右上角浮动小logo样式*/
.right_up_logo {
  border-bottom: 0;
  position: fixed;
  right: 30px;
  text-decoration: none;
  top: 0;
  z-index: 1;
}

/*掐头去尾右侧中间总样式*/
.markdown-section {
  margin: 0 auto;
  padding: 30px 15px 40px;
  position: relative;
  color: #34495e;
  font-family: Source Sans Pro, Helvetica Neue, Arial, sans-serif;
  font-size: 15px;
  letter-spacing: 0;
  overflow-x: hidden;
  display: block;
  box-sizing: border-box;
}

/*左侧下拉菜单样式*/
.sidebar-nav {
  line-height: 2em;
  padding-bottom: 40px;
}

/*左侧鼠标移动上去变手指*/
.sidebar-nav ul li a {
  cursor: pointer;
}

/*p标签样式*/
p {
  display: block;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0;
  margin-inline-end: 0;
}

/*侧边栏样式*/
.sidebar {
  border-right: 1px solid rgba(0, 0, 0, .07);
  overflow-y: auto;
  padding: 40px 0 0;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  transition: transform .25s ease-out;
  width: 300px;
  z-index: 20;
}

/*markdown下各种标签样式*/
.markdown-section ol, .markdown-section p, .markdown-section ul {
  line-height: 1.6rem;
  word-spacing: .05rem;
}

/*右侧文章总样式*/
article {
  display: block;
  max-width: 85%;
}

/*alert中p标签样式*/
.alert p {
  margin-top: .5rem;
  margin-bottom: .5rem;
}

.markdown-section hr {
  border: none;
  border-bottom: 1px solid #eee;
  margin: 2em 0;
}

.markdown-section > * {
  box-sizing: border-box;
  font-size: inherit;
}

/*alert中p标签的样式*/
.alert p {
  margin-top: .5rem;
  margin-bottom: .5rem;
}

/*总样式*/
* {
  -webkit-font-smoothing: antialiased;
  -webkit-overflow-scrolling: touch;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  /* -webkit-text-size-adjust: none; */
  -webkit-touch-callout: none;
  box-sizing: border-box;
}

/*body总样式*/
body {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  color: #34495e;
  font-family: Source Sans Pro, Helvetica Neue, Arial, sans-serif;
  font-size: 15px;
  letter-spacing: 0;
  margin: 0;
  overflow-x: hidden;
}


/*底部养鱼样式，自带上下渐变*/
.foot-bot {
  display: block;
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
  color: #a4acb7;
  height: 150px;
  font-family: "Microsoft Yahei";
  line-height: 22px;
  background-image: linear-gradient(to top, #657ffd, #ffffff);
}


</style>
